<template>
  <div>
    <ux-grid show-overflow highlight-hover-row row-key height="400" ref="plxTree2" border="inner" :show-header="false" :data="tableData2" :checkbox-config="{labelField: 'name'}" :tree-config="{children: 'children', accordion: true, line: true, iconOpen: 'el-icon-minus', iconClose: 'el-icon-plus'}">
      <ux-table-column type="checkbox" tree-node>
        <!--自定义展开部分的内容-->
        <template v-slot="{ row }">
          <span>
            <template v-if="row.children && row.children.length">
              <i style="margin-left: 8px" :class="$refs.plxTree2.isTreeExpandByRow(row) ? 'el-icon-folder-opened' : 'el-icon-folder'"></i>
            </template>
            <template v-else>
              <i style="margin-left: 8px" class="el-icon-document"></i>
            </template>
            <span>{{ row.ab }}</span>
          </span>
        </template>
      </ux-table-column>
      <ux-table-column title="操作" width="140">
        <template v-slot="{ row }">
          <span class="el-icon-close"></span>
          <span class="el-icon-download" style="margin-left: 10px"></span>
          <span class="el-icon-edit-outline" style="margin-left: 10px"></span>
        </template>
      </ux-table-column>
    </ux-grid>
  </div>
</template>

<script>
export default {
  name: "selectionTree",
  data() {
    return {
      tableData: [],
      tableData2: [],
      tableDataLazy: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          id: 5,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          id: 6,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          id: 7,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          id: 8,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    }
  },
  mounted() {
    setTimeout(() => {
      const data = Array.from({ length: 50 }, (_, idx) => ({
        id: idx + '_' + 1,
        date: '2016-05-03',
        name: 1,
        ab: '欢迎使用u-table',
        address: idx,
        children: Array.from({ length: 2 }, (_, idx2) => ({
          id: idx + '_' + idx2 + '_' + 1,
          date: '2016-05-03',
          name: 1,
          ab: '欢迎使用u-table',
          address: idx + '_' + idx2,
          children: Array.from({ length: 1 }, (_, idx3) => ({
            id: idx + '_' + idx2 + '_' + idx3 + '_' + 1,
            date: '2016-05-03',
            name: 1,
            ab: '欢迎使用u-table',
            address: idx + '_' + idx2 + '_' + idx3
          }))
        }))
      }));
      const data2 = Array.from({ length: 30 }, (_, idx) => ({
        id: idx + '_' + 1,
        date: '2016-05-03',
        name: 1,
        ab: '欢迎使用u-table',
        address: idx,
        children: Array.from({ length: 2 }, (_, idx2) => ({
          id: idx + '_' + idx2 + '_' + 1,
          date: '2016-05-03',
          name: 1,
          ab: '欢迎使用u-table',
          address: idx + '_' + idx2,
          children: Array.from({ length: 1 }, (_, idx3) => ({
            id: idx + '_' + idx2 + '_' + idx3 + '_' + 1,
            date: '2016-05-03',
            name: 1,
            ab: '欢迎使用u-table',
            address: idx + '_' + idx2 + '_' + idx3
          }))
        }))
      }));
      this.tableData = data
      this.tableData2 = data2
    })
  },
  methods: {
    selectChangeEvent(rows) {
      console.log(rows)
    },
    getTreeExpansionEvent() {
      let treeExpandRecords = this.$refs.plxTree.getTreeExpandRecords()
      console.log(treeExpandRecords)
    },
    // 懒加载
    loadChildrenMethod({ row }) {
      // 这是你的行row,你可以获取你的row.id，去发请求 找后端拿数据，然后在返回你懒加载的数据
      // console.log(row)
      // （必须返回 Promise<any[]>对象）
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([
            {
              id: 31,
              date: '2016-05-01',
              name: '懒加载王小虎1',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '懒加载王小虎2',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ])
        }, 1000)
      })
      // 请求后端示例 axios.get本来就是返回一个Promise
      // return axios.get('/api/test/list', { parentId: row.id })
    }
  }
}
</script>

<style scoped>
</style>